<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/teachingMgt' }">教学管理</el-breadcrumb-item>
                <el-breadcrumb-item>教学详情</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">学生信息: </span>
                    <el-input type="text"
                        v-model="studentInfoValue"
                        placeholder="请输入学生信息"
                        style="float:left; width:200px;"
                    ></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column  prop="userName" label="学生姓名">
                    </el-table-column>
                    <el-table-column  prop="userNumber" label="学号">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="goDetail(scope.row.id)">详情</el-button>
                            <a v-if="scope.row.downloadFlag" style="color: #c82011; font-size:12px; vertical-align: middle;" :href="'/dataplatform/container/download/student?stuorteaId='+scope.row.id+'&classRelationId='+classId">下载</a>
                            <!-- <el-button type="text" size="small" @click="downFn(scope.row.id)">下载</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="tableData.length > 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                classId: '',
                studentInfoValue: '',
                tableLoading: false,
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000
            }
        },
        created () {
            this.classId = this.$route.query.classId
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/item/teach/studentItemPage?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&classRelationId='+self.classId+'&userInfo='+self.studentInfoValue).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
            goDetail(id){
                this.$router.push({
                    path: '/teacher/teachingMgtInfoDetail',
                    query: {classId:this.classId, userId: id}
                })
            },
            downFn(id){
                let self = this
                self.$http.get('/dataplatform/container/download/student-check?stuorteaId='+id+'&classRelationId='+self.classId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href =  '/dataplatform/container/download/student?stuorteaId='+id+'&classRelationId='+self.classId;
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
